import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from '@/common/layer';
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import jquery from 'jquery';
import jquerydate from '@/common/jquerydate'
import Sel1View from '@/components/sel1'
import RadioPicker2 from '@/components/RadioPicker2'
import RadioPicker1 from '@/components/RadioPicker1'
import Picker from '@/components/picker'

class Defbsale extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loantypetit: '贷款类型',
            loantypeselGroups: [{ value: 0, label: '房贷' }, { value: 1, label: '车贷' }, { value: 2, label: '信用贷' }, { value: 3, label: '保单贷' }, { value: 4, label: '公积金贷' }],
            loantypesel: -1,
            loantypesellLabel: '点击选择',
            loantypeselShow: false,
            protit: '申请产品',
            professionalGroups: [],
            professional: -1,
            professionalLabel: '点击选择',
            professionalShow: false,
            prolist: [],
            prolist1: [],
            prolist2: [],
            cancelid: '',
            exitid: '',
            saleid: '',
            salereason: '',
            stateimg: ['/assets/wechat/tag_nopass.png', '/assets/wechat/tag_stop.png', '/assets/wechat/tag_finish.png', '/assets/wechat/tag_cancel.png'],
            remark: ['', '', '中止原因','取消原因','放款备注'],
        }
    }

    componentDidMount() {
        jquery.date('#date3');
        this.feedback(0)
        var that = this
        jquery("li").eq(0).find("span").addClass("active")
        jquery("li").on("click", function () {
            jquery(this).find("span").addClass("active");
            jquery(this).siblings().find("span").removeClass("active");
            that.feedback(jquery(this).index())
            if (jquery(this).index() == 0) {
                jquery('.oneMonth').show().siblings().hide()
            } else if (jquery(this).index() == 1) {
                jquery('.thirdMonth').show().siblings().hide()
            } else {
                jquery('.end').show().siblings().hide()
            }
        })

        //限制textarea字数
        jquery("textarea").on('keyup', function () {
            var val = jquery("textarea").val()
            // jquery("#textNum").text(val.length)
            if (val.length >= 50) {
                jquery("textarea").val(val.substring(0, 50))
                layer.open({
                    content: "文字超出了",
                    btn: "知道了"
                })
            }
        })

        //根据贷款类型选择产品
        jquery(".sel2div").click(function () {
            that.getprotype()
        })
    }

    async feedback(i) {
        let sendobj = {
            salePhone: localStorage.getItem("salephone"),
            queryStatus: i
        }
        let res = await util.rjax({
            url: '/otherProductStatus/getList',
            type: "post",
            data: sendobj
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            console.log(res.data.rows)
            if (i == 0 && res.data.rows.length != 0) {
                this.setState({ prolist: res.data.rows })
            } else if (i == 1 && res.data.rows.length != 0) {
                this.setState({ prolist1: res.data.rows })
            } else if (i == 2 && res.data.rows.length != 0) {
                this.setState({ prolist2: res.data.rows })
            }
        }
    }

    //获取贷款产品
    async getprotype() {
        this.setState({ professionalGroups: [] })
        let res = await util.rjax({
            url: '/other/list?productType=' + this.state.loantypesel,
            type: 'get',
        })
        if (res) {
            var data = res.data.rows
            for (let i in data) {
                var obj = {}
                obj = { value: data[i].id, label: data[i].title }
                this.state.professionalGroups.push(obj)
            }
            this.setState({ professional: this.state.professionalGroups[0].value })
        }
    }

    //修改报单
    async editdeclar(e) {
        this.setState({ exitid: e.target.id })
        jquery(".editdigbox").show()
    }

    async exitno() {
        this.setState({ exitid: '' })
        jquery(".editdigbox").hide()
    }

    async exityes() {
        if (this.state.loantypesel < 0) {
            layer.open({ content: '请填写贷款类型', btn: '好的' })
            return
        }
        if (this.state.professional < 0) {
            layer.open({ content: '请填写申请产品', btn: '好的' })
            return
        }
        if (jquery("#date3").val() == '') {
            layer.open({ content: '请填写钉钉完善资料时间', btn: '好的' })
            return
        }
        this.exit()
    }

    async exit() {
        let sendobj = {
            productId: this.state.professional,//产品id
            statusId: this.state.exitid,//报单id
            submitTime: jquery("#date3").val()
        }
        let res = await util.rjax({
            url: '/productUpdate/submit',
            type: "post",
            data: sendobj
        })
        if (res) {
            this.setState({ loantypesel: -1 })
            this.setState({ professional: -1 })
            this.setState({ exitid: '' })
            layer.open({
                content: res.msg,
                btn: '好的',
                yes: function () {
                    window.location.reload();
                }
            })
        }
    }

    //放弃报单
    async giveup(e) {
        this.setState({ cancelid: e.target.id })
        jquery(".dialogcancel").show()
    }

    //NO
    async cancelno() {
        this.setState({ cancelid: '' })
        jquery(".dialogcancel").hide()
    }

    //YES
    async cancelyes() {
        var text = jquery("textarea").val()
        if (jquery("textarea").val() == '') {
            layer.open({
                content: "取消原因不能为空",
                btn: "好的"
            })
        } else {
            this.cancel(text)
            jquery(".dialogcancel").hide()
        }
    }

    async cancel(text) {
        let res = await util.rjax({
            url: '/otherProductStatus/cancel?id=' + this.state.cancelid + "&saleReason=" + text,
            type: "post"
        })
        if (res) {
            this.setState({ cancelid: '' })
            this.setState({ salereason: '' })
            this.feedback(1)
            layer.open({
                content: res.msg,
                btn: '好的',
                yes: function () {
                    window.location.reload();
                }
            })
        }
    }

    async godetail(e) {
        window.location.href = `./delookprog.html?id=` + e.target.id + "&apply=" + e.target.getAttribute("apply");
    }

    render() {
        let prolist = this.state.prolist.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                    </div>
                    <p className="detail" onClick={this.godetail.bind(this)} id={item.id} apply={item.apply}>查看处理进度<span className="rotate"><img className="pullimg" src="/assets/wechat/right.png" alt="" /></span></p>
                </div>
            )
        })

        let prolist1 = this.state.prolist1.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l proid" id="2222"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                    </div>
                    <h4 className="rejecttit">{this.state.remark[item.status]}</h4>
                    <p className="rejectreason">{item.endReason || item.saleReason || item.sixthRemark}</p>
                    <div className="rejectbtn">
                        <a href="#" className="editdeclar" id={item.id} onClick={this.editdeclar.bind(this)}>修改此报单</a>
                        <a href="#" className="giveup" id={item.id} onClick={this.giveup.bind(this)}>放弃此报单</a>
                    </div>
                </div>
            )
        })

        let prolist2 = this.state.prolist2.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l proid" id="2222"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                    </div>
                    <h4 className="rejecttit">{this.state.remark[item.status]}</h4>
                    <p className="rejectreason" style={{display:item.status==3?'block':'none'}}>{item.saleReason}</p>
                    <p className="rejectreason" style={{display:item.status==2?'block':'none'}}>{item.endReason}</p>
                </div>
            )
        })

        return (
            <div className="feedback">
                <div className="tab">
                    <ul>
                        <li data-id="0"><span>处理中</span></li>
                        <li data-id="1"><span>被拒订单</span></li>
                        <li data-id="2"><span>已完结</span></li>
                    </ul>
                </div>
                <div>
                    <div className="oneMonth">
                        {prolist}
                    </div>

                    <div className="thirdMonth" style={{ display: 'none' }}>
                        {prolist1}
                    </div>

                    <div className="end" style={{ display: 'none' }}>
                        {prolist2}
                    </div>
                </div>

                {/* 放弃报单弹框 */}
                <div className="dialogcancel">
                    <div className="iscancelbox">
                        <span className="canceltip">取消原因</span>
                        <textarea maxLength="50" name="" placeholder="文字不超过50个字" id="" cols="" rows=""></textarea>
                        {/* <span><span id="textNum">0</span>/100</span> */}
                        <p>
                            <span className="yes" onClick={this.cancelno.bind(this)}>取消</span>
                            <i></i>
                            <span className="no" onClick={this.cancelyes.bind(this)}>确定</span>
                        </p>
                    </div>
                </div>

                {/* 修改报单弹框 */}
                <div className="editdigbox">
                    <div className="editdig">
                        <h4>重新申请</h4>
                        <div>
                            <Sel1View className="inputboxview" title={this.state.loantypetit} label={this.state.loantypesellLabel} onClick={() => { this.setState({ loantypeselShow: true }) }} />
                            <Sel1View className="inputboxview" title={this.state.protit} label={this.state.professionalLabel} onClick={() => { this.setState({ professionalShow: true }) }} />
                            <div className="inputbox" style={{ position: 'relative' }}>
                                <div>
                                    <span>钉钉完善资料时间</span>
                                    <input placeholder="点击选择" name="ddtime" type="text" id="date3" data-options="{'type':'YYYY-MM-DD hh:mm:ss','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '19px' }} />
                                </div>
                            </div>
                        </div>
                        <Picker show={this.state.loantypeselShow} groups={this.state.loantypeselGroups} onChange={(val, label) => { this.setState({ loantypesel: val, loantypesellLabel: label, loantypeselShow: false }) }} onMaskClick={() => { this.setState({ loantypeselShow: false }) }} />
                        <Picker show={this.state.professionalShow} groups={this.state.professionalGroups} onChange={(val, label) => { this.setState({ professional: val, professionalLabel: label, professionalShow: false }) }} onMaskClick={() => { this.setState({ professionalShow: false }) }} />
                        <div className="exitbtn">
                            <a className="exitno" onClick={this.exitno.bind(this)}>取 消</a>
                            <span>|</span>
                            <a className="exityes" onClick={this.exityes.bind(this)}>提 交</a>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}

ReactDom.render(<Defbsale />, document.getElementById("app"));